<template>
  <q-layout view="hhr lpr lFf">

    <q-header reveal class="bg-primary text-white" height-hint="98">
      <q-toolbar class="content-around">
        <q-toolbar-title class="col-2">
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>
          LouiSns
        </q-toolbar-title>

        <q-tabs class="col-8" align="left">
          <q-route-tab to="/home" label="Home" />
          <q-route-tab to="/picture-wall" label="Wall" />
          <q-route-tab to="/board" label="Board" />
        </q-tabs>

        <template>
          <q-btn v-if="isLogin" class="" dense flat round icon="menu" @click="right = !right" />
          <q-btn v-else dense flat  @click="loginDialogShow">登录/注册</q-btn>
        </template>

      </q-toolbar>
    </q-header>

    <q-drawer v-model="right" side="right" behavior="mobile" bordered>
      <!-- drawer content -->
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

    <login ref="login" />

  </q-layout>
</template>

<script>
import Login from "pages/Login";
export default {
  data () {
    return {
      right: false,
      login: false,
      isLogin: false
    }
  },
  methods: {
    loginDialogShow() {
      this.$refs.login.dialog();
    }
  },
  components: {
    Login
  }
}
</script>
